<template>
	<view class="withdrawal">
		<base-navbar back-color="#fff" title="提现记录"></base-navbar>
		<view class="header">
			<c-tabs :list="tabs" :current="current" :line-color="themeColor.theme" @change="tabChange"></c-tabs>
		</view>
		<view class="content">
			<c-empty v-if="!records || records.length==0"></c-empty>
			<view class="records-item" v-for="(record,index) in records" :key="index">
				<view class="r-left">
					<!-- <text class="name u-line-1">{{ record.name}}</text> -->
					<text class="desc">订单号：{{ record.casordno }}</text>
					<text class="desc">提现类型：<text v-if="record.type=='00'">实时到账</text><text
							v-if="record.type=='01'">批次到账</text></text>
					<!-- <text class="desc">提现标识：<text v-if="record.acount_type=='0'">虚拟账户</text><text
							v-if="record.acount_type=='1'">激励金账户</text><text
							v-if="record.acount_type=='2'">分账</text></text> -->
					<text class="desc">提现状态：<text v-if="record.status=='00'">未处理</text><text
							v-if="record.status=='01'">处理中</text><text v-if="record.status=='08'">实时接口付款成功</text><text
							v-if="record.status=='11'">批次接口付款成功</text><text v-if="record.status=='12'">付款失败</text><text
							v-if="record.status=='99'">超时</text></text>
					<text class="time">提现时间：{{ record.actdat }}</text>
				</view>
				<view class="r-right">
					<text class="money increment">+{{ record.txamt }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		tabs: [{
				text: '星驿付提现记录'
			},
			{
				text: '佣金提现记录'
			},
		],
		current: 0,
		records: [],
		isMore: false,
	});

	onLoad((opt) => {
		getData();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function getData() {
		request.get('withdrawalrecords/list', {
			user_type: 1, //0=商户，1=门店，2=会员，3=代理
			type: state.current,
			skip: state.records.length,
			limit: 10,
		}).then(res => {
			console.log(res);
			if (res.code === 1) {
				state.isMore = res.data.is_more;
				if (state.records.length <= 0) {
					state.records = res.data.list;
				} else {
					state.records = state.records.concat(res.data.list);
				}
			}
		});
	}

	// 选项卡改变
	function tabChange(e) {
		console.log(e);
		state.current = e.index;
		state.records = [];
		getData();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		tabs,
		current,
		records,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.withdrawal {
		.header {
			margin-bottom: $m24;
			background-color: $u-bg-reverse-color;
			border-radius: $radius-12;
		}

		.content {
			background-color: $u-bg-reverse-color;
			margin-bottom: $m24;

			.empty {
				height: 80rpx;
				width: 100%;
				line-height: 80rpx;
				text-align: center;
			}

			.records-item {
				@include f-between;
				overflow: hidden;
				margin-bottom: $m24;
				padding: $m24;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;

				.r-left,
				.r-right {
					display: flex;
					flex-direction: column;
				}

				.r-left {
					flex: 1;
					overflow: hidden;

					.name {
						font-size: $font-32;
						color: $u-main-color;
						font-weight: bold;
					}
				}

				.r-right {
					align-items: flex-end;

					.money {
						font-size: $font-36;
						font-weight: bold;

						&.increment {
							color: $u-type-error;
						}

						&.decrement {
							color: $u-type-success;
						}
					}
				}

				.desc,
				.time {
					font-size: $font-24;
					color: $u-tips-color;
				}

				.desc-right {
					padding-left: 20rpx;
				}
			}
		}
	}
</style>